<template>
  <div class="swiper-box">
    <div
      class="wrap"
      :style="{height:height+'px'}"
      @mouseenter="handlermMouseenter"
      @mouseleave="handlermMouseleave"
    >
      <div class="list" :style="{left:left+'px'}">
        <div
          :style="{width:width+'px'}"
          class="item"
          @click="handlerClick(item)"
          v-for="(item,index) in swiperList"
          :key="index"
        >
          <img :src="PICsPACE+item.picUrl" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from "@/assets/image/广告1.png";
// import b from "@/assets/image/广告2.png";
// import c from "@/assets/image/广告2.png";
export default {
  data() {
    return {
      speed: 1,
      left: 0,
      timer: null,
      PICsPACE:localStorage.getItem("picSpace"),
    };
  },
  computed: {
    swiperList() {
      return [...this.list, ...this.list];
    },
    baseUrl() {
      return this.$store.state.fileIp;
    },
  },
  created() {
    // console.log(this.list, 55555);
    // console.log(this.swiperList,666)
    // console.log(this.width,777)
  },
  mounted() {
    this.start();
  },
  methods: {
    start() {
      this.timer = setInterval(() => {
        this.left -= this.speed;
        if (this.left < -1169) {
          this.left = 0;
        }
      }, 17);
    },
    handlermMouseenter() {
      clearInterval(this.timer);
    },
    handlermMouseleave() {
      this.start();
    },
    handlerClick(item) {
      window.open(item.href);
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
  props: ["list", "width", "height","style"],
};
</script>

<style lang="less" scoped>
.swiper-box {
  padding: 0 20px;
  width: 1200px;
  background: white;
  .wrap {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    background: white;
    margin-bottom: 30px;
    .list {
      position: absolute;
      display: flex;
      .item {
        //   width: 372px;
        margin-right: 22px;
      }
    }
  }
}
</style>
